<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经销商订单详情</title>
    <!-- 引入Element UI样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- 引入Vue和Element UI的JS文件 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <!-- 引入axios -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <!-- 引入本地js -->
    <link rel="stylesheet" href="../../assets/css/styles.css" />
    <link rel="stylesheet" href="../../assets/css/element-ui.css" />
</head>
<body>
<div id="app">
    <div class="header">
        <div class="container header-content">
            <div class="logo">订单管理系统</div>
            <!-- <div class="user-info">
              <div class="user-avatar"></div>
              <span>{{ username }}</span>
            </div> -->
        </div>
    </div>
    <div class="container main-content">
        <!-- 添加面包屑导航 -->
        <div class="breadcrumb-container">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item @click.native="goToPage('../../index.html')">首页</el-breadcrumb-item>
                <el-breadcrumb-item @click.native="goToPage('../index.html')">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item @click.native="goToPage('./dealer_order_list.html')">CO经销商订单</el-breadcrumb-item>
                <el-breadcrumb-item>订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content">
            <h1 class="module-title">基本信息</h1>
            <div class="center-grid mb-20">
                <el-form ref="form" :model="form" size="mini">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="订单编号：">{{ form.cdoCode }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="订单总价（元）：">{{ form.doAmount }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="折扣：">{{ form.doRate }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="税费（元）：">{{ form.taxAmount }}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="订单状态：">
                                {{ getOptionsStr('so_status',form.status) }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="责任单位：">{{ form.responsibilityDept }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预计交付时间：">{{ form.expectedTime }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="订单跟踪：">
                                {{ getOptionsStr('so_progress',form.doProgress) }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="创建人：">{{ form.createBy }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <h1 class="module-title">经销商信息</h1>
            <div class="center-grid mb-20">
                <el-form ref="form" :model="form" size="mini">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="门店名称：">{{ form.dealerName }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店联系人：">{{ form.contactName }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店联系方式：">{{ form.contactPhone }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="门店地址：">{{ form.dealerAddress }}</el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <h1 class="module-title">车辆信息</h1>
            <div class="center-grid mb-20">
                <el-form ref="form" :model="rowDetail" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="车型号：">{{ form.carModelName }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="车平台：">{{ form.carPlatformName }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="数量：">1</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="单价：">{{ form.orderPrice }}</el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>
            <h1 class="module-title">选配信息</h1>
            <div class="center-grid mb-20">
                <div v-for="configItem in configOptions" :key="bigConfigCode" style="margin-bottom: 20px">
                    <div class="main-category-title">{{configItem.bigConfigName}}</div>
                    <el-table :data="configItem.smallConfigList" stripe border>
                        <el-table-column prop="smallConfigName" width="400" label="选配项目"></el-table-column>
                        <el-table-column label="选配内容">
                            <template #default="{ row }">
                                <div v-if="row.configType === '0'">
                                    <span>{{row.configText}}</span>
                                </div>
                                <div v-if="row.configType !== '0'">
                                    <span>{{row.optionValue}}</span>
                                </div>
                                <!--<div v-if="row.configType === '1'">
                                    <el-radio-group v-model="row.selectedValue">
                                        <el-radio v-for="(option, index) in row.optionList" :key="index" :label="option.optionCode">{{ option.optionName }}</el-radio>
                                    </el-radio-group>
                                </div>
                                <div v-if="row.configType === '2'">
                                    <el-checkbox-group v-model="row.selectedValues">
                                        <el-checkbox v-for="(option, index) in row.optionList" :key="index" :label="option.optionCode">{{ option.optionName }}</el-checkbox>
                                    </el-checkbox-group>
                                </div>
                                <div v-if="row.configType === '0'">
                                    <span>{{row.configText}}</span>
                                </div>-->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div style="height:20px;"></div>

            <h1 class="module-title">交付信息</h1>
            <div class="center-grid mb-20">
                <el-form ref="form" :model="form" size="mini">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="交车经办人：">{{ form.deliverPerson }}</el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="交车地点：">{{ form.deliverAddress }}</el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预计交付时间：">{{ form.expectedTime }}</el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>


            <h1 class="module-title">附件信息</h1>
            <div class="center-grid mb-20">
                <el-form ref="form" :model="form" size="mini">
                    <el-row>
                        <el-col :span="24">
                            <a :href="request_host + form.attachmentAddress">{{ form.attachmentAddress }}</a>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <!--<div style="margin-left: 40%">
                <el-button type="primary" @click="createSoData" v-if="form.status ==='0'">生成销售订单</el-button>
                <el-button type="primary" @click="createMoData" v-if="form.soStatus ==='0'">生成生产订单</el-button>
            </div>-->
        </div>
    </div>
    <!-- 展示车辆详情 -->
    <el-dialog title="车辆详情" :visible.sync="detailDialog" width="1200px" append-to-body :fullscreen="true">
        <el-form ref="form" :model="rowDetail" label-width="100px">
            <div>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="车型号：">{{ form.carModelName }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车平台：">{{ form.carPlatformName }}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="数量：">1</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单价：">{{ form.orderPrice }}</el-form-item>
                    </el-col>
                </el-row>
            </div>

        </el-form>
    </el-dialog>
</div>
<script src="../../assets/js/constant.js"></script>
<script src="../../assets/js/utils.js"></script>
<script src="../../assets/js/auth.js"></script>
<!-- 引入axios -->
<script src="../../assets/js/axios.min.js"></script>
<!-- 引入 Vue.js -->
<script src="../../assets/js/vue.js"></script>
<!-- 引入 Element UI 的 JS 文件 -->
<script src="../../assets/js/element-ui.js"></script>
<script>

    checkAuthentication(2)
    new Vue({
        el: '#app',
        data() {
            return {
                currentUser: JSON.parse(localStorage.getItem('currentUser')) || {},
                userMenuList: JSON.parse(localStorage.getItem('userMenuList')) || [],
                // 遮罩层
                loading: true,
                // 分页信息
                total: 0,
                pageNum: 1,
                pageSize: 10,
                form: {},
                soCars: {},
                optionDatas: [],
                // 字典数据
                // dict: dict,
                params: {},
                request_host: request_host,
                number: 0,
                dicts: ['so_status', 'so_progress'],
                optionsObj: [],
                tableData: [],
                configOptions: [],
                tableColumnData: [
                    {
                        fieldName: '车平台',
                        fieldApi: 'carPlatformName'
                    },{
                        fieldName: '车型号',
                        fieldApi: 'carModelName'
                    },
                    {
                        fieldName: '品牌',
                        fieldApi: 'carBrand'
                    },
                    {
                        fieldName: '来源地',
                        fieldApi: 'carSourceLocation'
                    },
                    {
                        fieldName: '车内布局',
                        fieldApi: 'carLayout'
                    },
                    {
                        fieldName: '单价',
                        fieldApi: 'orderPrice'
                    }
                ],
                tableLoading: false,
                detailDialog: false, // 详情
                rowDetail: {},

            }
        },
        created() {
            // 从URL获取订单ID
            this.getQueryParams()
            this.getOptions()
            if (this.params.cdoCode) {
                this.loading = true
                // 获取订单详情
                axios.get(`${this.request_host}/system/do/getDoInfo?cdoCode=` + this.params.cdoCode)
                    .then(response => {
                        this.form = response.data.data
                        this.loading = false
                    })
            }
            if (this.params.cdoCode) {
                // 获取订单详情
                axios.get(`${this.request_host}/system/do/getCdoOption?cdoCode=` + this.params.cdoCode)
                    .then(response => {
                        this.configOptions = response.data.data
                    })
            }
        },
        methods: {
            exit,
            getQueryParams() {
                const params = {};
                const queryString = window.location.search.substring(1); // 去掉 ?
                const pairs = queryString.split('&');
                pairs.forEach(pair => {
                    const [key, value] = pair.split('=');
                    params[decodeURIComponent(key)] = decodeURIComponent(value);
                });
                this.params = params;
            },
            getOptions() {
                this.dicts.forEach((item) => {
                    axios.get(`${this.request_host}/system/dict/data/type/${item}`).then((response) => {
                        this.$set(this.optionsObj, item, {})
                        if (response.status == 200) {
                            response.data.data.map((item1) => {
                                this.optionsObj[item][item1.dictValue] = item1.dictLabel
                            })
                        }
                    })
                })
            },
            getOptionsStr(opt, value) {
                if (this.optionsObj[opt] && value) {
                    return this.optionsObj[opt][value]
                }
                return ''
            },
            openDetail(row) {
                this.rowDetail = row
                this.optionDatas = row.soOptionVo
                this.detailDialog = true
            },
            // 销售订单转执行订单
            createEoData(){

            },
            generateExecutionOrderSubmit(row) {
                this.$confirm(`确认生成该记录的执行订单？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 新增
                    axios.post(`${this.request_host}/system/executeOrder/createOrder`, row)
                        .then(response => {
                            if (response.data.code === 200){
                                //window.location.reload()
                                window.open('../executeOrder/execute_order_list.html')
                            }else {
                                this.$message.error(response.data.msg)
                            }

                        }).catch(error => {
                        this.$message.error(`创建失败`);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });

            },
            goToPage(path) {
                window.location.href = path;
            },
            createSoData() {
                this.$confirm(`确认生成该记录的销售订单？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let record = {
                        "channelOrderCode": this.form.cdoCode,
                        "soType": "2",
                    }
                    // 新增
                    axios.post(`${this.request_host}/system/order/createOrder`, record)
                        .then(response => {
                            if (response.data.code === 200){
                                //window.location.reload()
                                window.open('../so/so_list.html')
                            }else {
                                this.$message.error(response.data.msg)
                            }

                        }).catch(error => {
                        this.$message.error(`创建失败`);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            createMoData() {
                this.$confirm(`确认生成该记录的生产订单？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let record = {
                        "soCode": this.form.soCode,
                    }
                    // 新增
                    axios.post(`${this.request_host}/order/manufactureOrder`, record)
                        .then(response => {
                            if (response.data.code === 200){
                                //window.location.reload()
                                window.open('../manufactureOrder/manufacture_order_list.html')
                            }else {
                                this.$message.error(response.data.msg)
                            }

                        }).catch(error => {
                        this.$message.error(`创建失败`);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            }
        }
    })
</script>
<style>
    .breadcrumb-container {
        padding: 12px 20px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0,21,41,.08);
        margin-bottom: 20px;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    .breadcrumb-container .el-breadcrumb {
        line-height: 1;
        font-size: 13px;
    }
    .breadcrumb-container .el-breadcrumb__item:last-child .el-breadcrumb__inner {
        color: #409EFF;
        font-weight: bold;
    }
    .breadcrumb-container .el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner {
        color: #606266;
    }
    /* 为固定定位的面包屑导航添加内容区域的padding */
    .main-content {
        padding-top: 60px;
    }
    .main-category-title {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        padding: 10px;
        background: #2625af;
    }
    .el-table__row td:first-child {
        background: blue !important; /* 设置背景色 */
        color: white;
    }
    .el-table__row td:nth-child(2) {
        background: #5f1ad3 !important;
        color: #fff;
    }
    .has-gutter tr th:first-child{
        background: blue !important; /* 设置背景色 */
        color: white;
    }
    .has-gutter tr th:nth-child(2){
        background: #5f1ad3 !important;
        color: #fff;
    }

</style>
</body>
</html>
